<template>
  <div>
    <div class="header">
      <div class="header_top">
        <img src="../../assets/images/返回.png" @click="fanhui" alt="" />
        <img src="../../assets/images/fanhuishouye.png" alt="" />
      </div>
      <div class="box">
        <img src="../../assets/images/头像.png" width="70" height="70" alt="" />
        <div class="line">
          <p><span>名称：</span><span>{{data.custName}}</span></p>
          <p style="color:#999"><span>电话：</span><span>{{data.telephone}}</span></p>
        </div>
        <div class="right" @click="btn(data.id)">客户信息</div>
      </div>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item>
        <span>收入分析</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>旗下企业</span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>合作伙伴</span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>当年收入</span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <div class="context">
      <GoodzuJ :datas="datas" v-show="active==0"/>
      <GoodzuJ1  :datas1="datas1" v-show="active==1"/>
      <GoodzuJ2  :datas2="datas2" v-show="active==2"/>
      <GoodzuJ3  :datas3="datas3" v-show="active==3"/>
    </div>
  </div>
</template>

<script>
import GoodzuJ from "./gondzuJ";
import GoodzuJ1 from "./goodzuJ1";
import GoodzuJ2 from "./goodzuJ2";
import GoodzuJ3 from "./goodzuJ3";
import { custId } from "../../request/api";
export default {
  components: {
    GoodzuJ,GoodzuJ1,
    GoodzuJ2,GoodzuJ3
  },
  data() {
    return {
      active: 0,
      icon: {
        active: require("../../assets/images/统计分析.png"),
        inactive: require("../../assets/images/统计分析 (1).png"),
        active1: require("../../assets/images/企业.png"),
        inactive1: require("../../assets/images/企业 (1).png"),
        active2: require("../../assets/images/握手,合作,协作.png"),
        inactive2: require("../../assets/images/握手,合作,协作 (1).png"),
        active3: require("../../assets/images/收入.png"),
        inactive3: require("../../assets/images/收入 (1).png"),
      },
      data:[],
      datas:[],
      datas1:[],
       datas2:[],
       datas3:[],
    };
  },
  methods: {
    fanhui() {
      this.$router.back();
    },
    btn(id){
        this.$router.push('/custID/'+id)
        console.log(id);
    }
  },
  created() {
    let id = this.$route.params.id;
    console.log(id);
    custId(id).then((res) => {
      if (res.errCode == 0) {
        // console.log(res);
        let {data} = res
        this.data=data
        this.datas=data.datas[0]
        this.datas1=data.datas[3]
        this.datas2=data.datas[2]
        this.datas3=data.datas[1]
        console.log(this.datas3);
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.context {
  padding: 20px 20px 0;
}
* {
  padding: 0;
  margin: 0;
}
.van-tabbar-item--active {
  color: #13227a;
}
.header {
  position: relative;
  height: 155px;
  width: 100%;
  background: #1f3484;
  .header_top {
    padding: 31px 12px 15px;
    height: 22px;
    display: flex;
    justify-content: space-between;
    img {
      height: 100%;
    }
  }
  .box {
    width: 70%;
    height: 55%;
    background: #fff;
    position: absolute;
    bottom: 0;
    margin-left: 55px;
    border-radius: 6px 6px 0 0;
    display: flex;
    position: relative;
    align-items: center;
    img {
      margin: 8px;
    }
    .right {
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: gold;
      color: #fff;
      position: absolute;
      top: 10px;
      right: 0;
      border-radius: 6px 0 0 6px;
    }
  }
}
.van-tabbar--fixed {
  position: static;
}
</style>